
<template>
  <div id="container">
    <div class="content">
      <h2>资源分类</h2>
      <div class="box">
        <el-menu
          default-active="1992"
          class="el-menu-vertical-demo"
          active-text-color="#08A579"
          @open="handleOpen"
          @close="handleClose"
          @select="handTap"
        >
          <el-submenu index="1">
            <template slot="title">
              <span>高中必修一(人教版)</span>
            </template>
            <el-submenu index="1-1">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="1-1-1">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="1-1-2">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="1-1-3">3.出师表</el-menu-item>
            </el-submenu>
            
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <span>高中必修二(人教版)</span>
            </template>
            <el-submenu index="2-1">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="2-1-1">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="2-1-2">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="2-1-3">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="2-2-1">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="2-2-2">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="2-2-3">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="2-3">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="2-3-1">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="2-3-2">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="2-3-3">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="2-4">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="2-4-1">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="2-4-2">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="2-4-3">3.出师表</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <span>高中必修三(人教版)</span>
            </template>
            <el-submenu index="3-1">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="3-1-1">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="3-1-2">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="3-1-3">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="3-2">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="3-2-1">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="3-2-2">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="3-2-3">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="3-3">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="3-3-1">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="3-3-2">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="3-3-3">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="3-4">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="">3.出师表</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <span>高中必修四(人教版)</span>
            </template>
            <el-submenu index="4-1">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="4-2">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="4-3">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="4-4">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="">3.出师表</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <span>高三一轮复习</span>
            </template>
            <el-submenu index="5-1">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="5-2">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="5-3">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="">3.出师表</el-menu-item>
            </el-submenu>
            <el-submenu index="5-4">
              <template slot="title"
                ><i class="el-icon-circle-plus-outline"></i>第一单元</template
              >
              <el-menu-item index="">1.沁园春·长沙</el-menu-item>
              <el-menu-item index="">2.大堰河·我的保姆</el-menu-item>
              <el-menu-item index="">3.出师表</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ResourceNav",
  
  data() {
    return {
      lizi: "哈哈",
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      this.$emit("openOneTap", key, keyPath);
    },
    handleClose(key, keyPath) {
      this.$emit("openTwoTap", key, keyPath);
    },
    handTap(key, keyPath) {
      this.$emit("openThreeTap", key, keyPath);
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  .content {
    width: 300px;
    border-radius: 10px;
    background-color: #fff;
    h2 {
      padding-left: 20px;
      color: #333333;
      background-color: #f0f2f5;
      border: 1px solid #dee0e3;
      border-radius: 10px 10px 0px 0px;
      line-height: 46px;
    }
    .box {
      border-radius: 10px;
      .el-menu {
        border: 1px solid #dee0e3;
        border-radius: 0px 0px 10px 10px;
      }
      span{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 900;
        // font-family: Microsoft YaHei``
      }
      /deep/.el-submenu__title{
        font-weight: 900;
      }
      /deep/.is-active span{
        color: #08A579;
      }
    }
  }
}
</style>